<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="top-search">
			<view class="search-right">
				<uni-icons type="search" size="14" class="icons1"></uni-icons>
				<input type="text" value="" placeholder="想要发什么？" />
				<text class="sousuos">搜索</text>
			</view>
		</view>

		<view class="part1">
			<view class="my-order">
				<view class="tabs sort navIndex==1?'activite': ''" @click="checkIndex(1)">
					<text :class="[navIndex==1 ? 'heise':'huise']">正规商品</text>
					<text v-show="navIndex == 1"
						style="width: 50rpx;height: 7rpx;display: block;background: #FCDA22;border-radius: 3rpx;margin: auto;margin-top: -7rpx;"></text>
				</view>
				<view class="tabs sort navIndex==2?'activite': ''" @click="checkIndex(2)">
					<text :class="[navIndex==2 ? 'heise':'huise']">寄售商品</text>
					<text v-show="navIndex == 2"
						style="width: 50rpx;height: 7rpx;display: block;background: #FCDA22;border-radius: 3rpx;margin: auto;margin-top: -7rpx;"></text>
				</view>
				<view class="tabs sort navIndex==3?'activite': ''" @click="checkIndex(3)">
					<text :class="[navIndex==3 ? 'heise':'huise']">以物易物</text>
					<text v-show="navIndex == 3"
						style="width: 50rpx;height: 7rpx;display: block;background: #FCDA22;border-radius: 3rpx;margin: auto;margin-top: -7rpx;"></text>
				</view>
				<view class="tabs sort navIndex==4?'activite': ''" @click="checkIndex(4)">
					<text :class="[navIndex==4 ? 'heise':'huise']">相关用户</text>
					<text v-show="navIndex == 4"
						style="width: 50rpx;height: 7rpx;display: block;background: #FCDA22;border-radius: 3rpx;margin: auto;margin-top: -7rpx;"></text>
				</view>
			</view>
		</view>
		<view class="part2">
			<view class="content" v-if="navIndex==1">
				<view class="classify">
					<view class="classify-content">
						<view class="classify-content-img">
							<image src="../../../static/home/home-imgs1.png" mode=""></image>
						</view>
						<view class="classify-content-name">
							这里是商品标题这里是商品标题
							这里是商品标题...
						</view>
						<view class="classify-content-jia">
							￥2839.92
						</view>
						<view class="classify-content-yh">
							<image class="classify-content-yh1"></image>
							<view class="nameser">
								这是用户名
							</view>
							<popover :btnList="zpb" :active="false" @select="wallet_select($event)"
								style="float: right;">
								<text class="iconfont mores">&#xe657;</text>
							</popover>
						</view>
					</view>
					<view class="classify-content">
						<view class="classify-content-img">
							<image src="../../../static/home/home-imgs1.png" mode=""></image>
						</view>
						<view class="classify-content-name">
							这里是商品标题这里是商品标题
							这里是商品标题...
						</view>
						<view class="classify-content-jia">
							￥2839.92
						</view>
						<view class="classify-content-yh">
							<image class="classify-content-yh1"></image>
							<view class="nameser">
								这是用户名
							</view>
							<popover :btnList="zpb" :active="false" @select="wallet_select($event)"
								style="float: right;">
								<text class="iconfont mores">&#xe657;</text>
							</popover>
						</view>
					</view>
					<view class="classify-content">
						<view class="classify-content-img">
							<image src="../../../static/home/home-imgs1.png" mode=""></image>
						</view>
						<view class="classify-content-name">
							这里是商品标题这里是商品标题
							这里是商品标题...
						</view>
						<view class="classify-content-jia">
							￥2839.92
						</view>
						<view class="classify-content-yh">
							<image class="classify-content-yh1"></image>
							<view class="nameser">
								这是用户名
							</view>
							<popover :btnList="zpb" :active="false" @select="wallet_select($event)"
								style="float: right;">
								<text class="iconfont mores">&#xe657;</text>
							</popover>
						</view>
					</view>
					<view class="classify-content">
						<view class="classify-content-img">
							<image src="../../../static/home/home-imgs1.png" mode=""></image>
						</view>
						<view class="classify-content-name">
							这里是商品标题这里是商品标题
							这里是商品标题...
						</view>
						<view class="classify-content-jia">
							￥2839.92
						</view>
						<view class="classify-content-yh">
							<image class="classify-content-yh1"></image>
							<view class="nameser">
								这是用户名
							</view>
							<popover :btnList="zpb" :active="false" @select="wallet_select($event)"
								style="float: right;">
								<text class="iconfont mores">&#xe657;</text>
							</popover>
						</view>
					</view>

				</view>
			</view>
			<view class="content" v-if="navIndex==2">

				2
			</view>
			<view class="content" v-if="navIndex==3">
				<view class="wuwu">
					<view class="wu-content">

						<view class="wu-content1">
							<view class="wu-content-btn">闲置物品</view>
							<view class="wu-content-left">
								<image src="../../../static/home/ss-imgs1.png" mode=""></image>
							</view>
							<view class="wu-content-btn2">想要物品</view>
							<view class="wu-content-right">
								<image src="../../../static/home/ss-imgs2.png" mode=""></image>
							</view>
						</view>
						<view class="wu-content1-name">
							<view class="wu-content1-name1">
								Microsoft Xbox one s 专业游戏玩家机 1TB
							</view>
							<view class="wu-content1-name1">
								iPhone13 石墨灰 1TB 全网通乔布斯限定签名至尊版
							</view>
						</view>
						<view class="wu-content2">
							<view class="wu-content2-name">
								<view class="wu-content2-name-img">
									<image src="../../../static/home/ss-imgs5.png" mode=""></image>
								</view>
								<view class="wu-content2-name-title">
									用户名
								</view>
							</view>
							<view class="wu-content2-name2">
								<view class="wu-content2-name2-img">
									<image src="../../../static/home/ss-imgs3.png" mode=""></image>
								</view>
								<view class="wu-content2-name2-title">
									<image src="../../../static/home/ss-imgs4.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="wu-content">

						<view class="wu-content1">
							<view class="wu-content-btn">闲置物品</view>
							<view class="wu-content-left">
								<image src="../../../static/home/ss-imgs1.png" mode=""></image>
							</view>
							<view class="wu-content-btn2">想要物品</view>
							<view class="wu-content-right">
								<image src="../../../static/home/ss-imgs2.png" mode=""></image>
							</view>
						</view>
						<view class="wu-content1-name">
							<view class="wu-content1-name1">
								Microsoft Xbox one s 专业游戏玩家机 1TB
							</view>
							<view class="wu-content1-name1">
								iPhone13 石墨灰 1TB 全网通乔布斯限定签名至尊版
							</view>
						</view>
						<view class="wu-content2">
							<view class="wu-content2-name">
								<view class="wu-content2-name-img">
									<image src="../../../static/home/ss-imgs5.png" mode=""></image>
								</view>
								<view class="wu-content2-name-title">
									用户名
								</view>
							</view>
							<view class="wu-content2-name2">
								<view class="wu-content2-name2-img">
									<image src="../../../static/home/ss-imgs3.png" mode=""></image>
								</view>
								<view class="wu-content2-name2-title">
									<image src="../../../static/home/ss-imgs4.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==4">

				<view class="user">
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>
					<view class="user-content">
						<view class="user-content-title">
							<view class="user-content-title-img">
								<image src="../../../static/home/ss-imgs6.png" mode=""></image>
							</view>
							<view class="user-content-title-name">
								<view class="user-content-title-name1">这里是用户名称文字</view>
								<view class="user-content-title-name2">已卖出：10 已买到：10</view>
							</view>
						</view>
						<view class="user-content-title2">+关注</view>
					</view>


				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import popover from "../../../uni_modules/uni-popover/components/dean-popover/dean-popover.vue"
	export default {
		components: {
			popover
		},
		data() {
			return {
				navIndex: 4,
				zpb: [{
						"title": '修改',
					},
					{
						"title": '删除',
					}
				],
			};
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index
			},
			wallet_select(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		border-top: 1rpx solid #F5F5F5;
	}

	.content {
		min-width: 722rpx;
		// background-color: #F5F5F5;

		.top-search {
			width: 100%;
			margin: 18rpx 25rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;


			.search-right {
				// background: #f5f5f5 url('../../static/search.png') no-repeat 25rpx 25rpx;
				font-size: 25rpx;
				background-size: 25rpx 25rpx;
				width: 699rpx;
				height: 72rpx;
				border: 2px solid #fcda22;
				border-radius: 36rpx 36rpx 36rpx 36rpx;

				.icons1 {
					position: absolute;
					margin: 23rpx 25rpx;
				}

				input {
					width: 380rpx;
					text-align: left;
					margin-left: 69rpx;
					margin-top: 18rpx;
					font-size: 25rpx;
					float: left;
					color: #000000;
				}

				.sousuos {
					width: 123rpx;
					height: 72rpx;
					background: #FCDA22;
					opacity: 1;
					border-radius: 0px 23rpx 23rpx 0px;
					float: right;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 72rpx;
					color: #21201D;
					opacity: 1;
					text-align: center;
				}
			}
		}

		// 切换tab栏
		.part1 {
			width: 699rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-top: 21rpx;

			.my-order {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				font-size: 25rpx;
				margin-left: 25rpx;
			}

			.tabs {
				width: 173rpx;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				font-size: 14px;
			}
		}

		// 分类内容
		.classify {
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.classify-content {
				width: 333rpx;
				margin-top: 34rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.classify-content-img {
					width: 333rpx;
					height: 333rpx;

					image {
						max-width: 100%;
						height: 100%;
						border-radius: 14rpx 14rpx 0px 0px;

					}
				}

				.classify-content-name {
					margin-top: 18rpx;
					font-size: 25rpx;
					font-weight: Medium;

				}

				.classify-content-jia {
					margin-top: 18rpx;
					font-size: 25rpx;
					color: #eb3e3e;
				}

				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;
					margin-top: 28rpx;

					.classify-content-yh1 {
						width: 36rpx;
						height: 36rpx;
						background: #EAEAEA;
						opacity: 1;
						margin-right: 14rpx;
						border-radius: 50%;
					}

					.mores {
						float: right;
						color: #21201D;
						opacity: 0.35;
					}

					.nameser {
						width: 240rpx;
					}
				}
			}
		}

		// 以物易物区域
		.wuwu {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background: #f5f5f5;

			.wu-content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 14rpx;
				margin: 25rpx;
				background-color: #FFFFFF;

				.wu-content1 {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					margin: 25rpx 25rpx 0 25rpx;
					position: relative;

					.wu-content-btn,
					.wu-content-btn2 {
						width: 124rpx;
						height: 47rpx;
						text-align: center;
						background-color: #fcda22;
						border-radius: 14rpx 0 10rpx 0;
						font-size: 18rpx;
						line-height: 47rpx;
						position: absolute;
						left: 1%;
						z-index: 999;
					}

					.wu-content-btn {
						position: absolute;
						left: 1%;
						z-index: 999;
					}

					.wu-content-btn2 {
						position: absolute;
						left: 51%;

						z-index: 999;
					}

					.wu-content-left,
					.wu-content-right {
						width: 311rpx;
						height: 311rpx;
						border-radius: 14rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}

				.wu-content1-name {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					margin: 25rpx;
					font-size: 25rpx;
					font-weight: 600;

					.wu-content1-name1 {
						margin: 0 25rpx 25rpx 25rpx;
					}
				}

				.wu-content2 {
					margin: 0 25rpx;
					border-top: 1px solid #f5f5f5;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					line-height: 86rpx;

					.wu-content2-name {
						display: flex;
						flex-direction: row;
						justify-content: left;

						.wu-content2-name-img {
							margin-right: 14rpx;
							width: 36rpx;
							height: 36rpx;

							image {
								max-width: 100%;
								max-height: 100%;
							}
						}

						.wu-content2-name-title {
							font-size: 21rpx;
						}
					}

					.wu-content2-name2 {
						display: flex;
						flex-direction: row;
						justify-content: right;

						.wu-content2-name2-img {
							margin-right: 14rpx;
							width: 36rpx;
							height: 36rpx;

							image {
								max-width: 100%;
								max-height: 100%;
							}
						}

						.wu-content2-name2-title {
							width: 123rpx;
							height: 36rpx;

							image {
								max-width: 100%;
								max-height: 100%;
							}
						}
					}
				}
			}
		}

		// 用户内容
		.user {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.user-content {
				margin: 38rpx 25rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.user-content-title {
					display: flex;
					flex-direction: row;
					justify-content: space-around;

					.user-content-title-img {
						width: 79rpx;
						height: 79rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}

					.user-content-title-name {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin: 0 18rpx;

						.user-content-title-name1 {
							font-size: 25rpx;
							color: #21201d;
							font-weight: 600;
						}

						.user-content-title-name2 {
							font-size: 21rpx;
							margin-top: 16rpx;
							color: #21201d;

							opacity: 0.35;
						}
					}
				}

				.user-content-title2 {
					width: 144rpx;
					height: 65rpx;
					border-radius: 32rpx;
					background-color: #fcda22;
					font-size: 21rpx;
					font-weight: 600;
					text-align: center;
					line-height: 65rpx;
					align-items: center;
				}
			}
		}
	}

	.huise {
		color: #000000;
		opacity: 0.35;
	}

	.heise {

		color: #21201D;
		opacity: 0.9;
	}
</style>
